<template>
	<el-row style="width: 100%">
		<el-row :gutter="20">
			<el-col :md="24" :lg="24">
				<section class="wt-header" style="padding:0; overflow:hidden">
					<router-link><h3>{{caseData.patientName}}</h3></router-link>
					<span>性别</span><span>出生日期：{{patientBirthday}}</span><span>病案号：{{caseData.patientId}}</span>
						<el-tag
							type="primary"
							v-for="tag in caseData.caseName"
							:key="tag"
						>{{tag}}</el-tag>
					<div class="rightButtons" v-if="hasEditPermission">
						<el-button
							@click="editCase"
							icon="edit">修改病例基本信息</el-button>
						<el-button
							@click="deleteCase"
							:icon="deleteIcon">删除该病例</el-button>
					</div>
					<div class="message" v-if="!hasEditPermission">
						<el-alert
								title="没有权限修改本病例"
								type="info"
								show-icon>
						</el-alert>
					</div>
				</section>
			</el-col>
		</el-row>
		<el-tabs type="border-card" v-model="tab">
			<!-- <el-tab-pane label="病例概要" name="timeline" style="min-height: 200px">
				<wt-model-timeline
					ref="timeline"
					:models="config.categories"
					:config="config.timeline"
					:params-data="paramsData"
					:allow-edit="hasEditPermission"
					@edit="handleTimelineEdit"
				></wt-model-timeline>
			</el-tab-pane>
				<el-tab-pane v-for="(cat,index) in categories" :key="index" :label="cat.title" :name="cat.name" style="min-height: 200px">
					<span slot="label">
						<img class="tab-icon" :src="getCategoryIcon(cat)"/>
						<span >{{cat.title}}[{{number[cat.tableName]}}]</span>
					</span>
					<template v-if="cat.single && !cat.customDisplay">
						<wt-model-info v-on:count="handleCountChange" :ref="cat.name" :model="cat" :params-data="paramsData" :allow-edit="hasEditPermission"></wt-model-info>
					</template>
					<template v-else>
						<wt-model-table
							:ref="cat.name" 
							:model="cat" 
							:params-data="paramsData" 
							:allow-add="hasEditPermission"
							:allow-edit="hasEditPermission"
							:allow-remove="hasEditPermission"
							v-on:count="handleCountChange"
						></wt-model-table>
					</template>
				</el-tab-pane> -->

				<el-tab-pane :label="cat.title" :name="cat.name" style="min-height: 200px">
					<span slot="label">
						<img class="tab-icon" :src="getCategoryIcon(cat)"/>
						<span >{{cat.title}}[{{number[cat.tableName]}}]</span>
					</span>
					</el-tab-pane>
		</el-tabs>
	</el-row>
</template>
<script>
/**
		病例详情，包含病例下的分类，以及病例基本信息展示
	 */
import Permission from "winged/utils/wt-permission";
import request from "winged/utils/axios";
import DateFormat from "winged/utils/wt-time-utils";
//import ImageTimeCalculator from "./case-image-time-calculator";

export default {
	name: "wt-case-detail",
	props: {
		count: {
			type: Array,
			default: _ => [5]
			//required: true
		}
	},
	data() {
		return {
			caseData: {}, // 病例记录的数据
			tab: "timeline",
			number: this.count,
			hasEditPermission: false,
			// hasEditPermission:Permission.checkPermission("patient-case-add") &&
			// 	Permission.canEditCase(
			// 		this.caseData.properties.creator_doctor_grade,
			// 		this.caseData.creator_doctor_id
			// 	) /*传入病例等级/病例创建者等级*/,
			deleting: false
		};
	},
	watch: {
		tab(val, oldValue) {
			if (val == oldValue) return;
			this.loadCurrentTab();
		}
	},
	computed: {
		deleteIcon: function() {
			return this.deleting ? "loading" : "delete";
		},
		patientBirthday: function() {
			var d = new Date(this.caseData.patientBirthday);
			//return DateFormat.format(d, "date");
		}
	},
	methods: {
		getCategoryIcon(cat) {
			let name = cat.name;
			if (cat.name == this.tab) {
				name += "-active";
			}
			return "/icons/case/" + name + ".png";
		},
		loadCurrentTab() {
			let comp = this.$refs[this.tab];
			if (comp !== undefined) {
				if (Array.isArray(comp)) {
					comp = comp[0];
				}
				if (this.doEdit && comp.edit) {
					comp.edit(this.doEditData);
					this.doEdit = false;
				} else {
					comp.load();
				}
			}
		},
		handleTimelineEdit(model, data) {
			console.log(model, data);
			this.doEdit = true;
			this.doEditData = data;
			this.tab = model.name;
		},
		handleCountChange(data) {
			let model = data.model;
			let count = data.data;
			this.number[model.tableName] = count;
		},
		deleteCase() {
			let _this = this;
			this.$confirm("确定删除本病例吗？", "操作提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					_this.deleting = true;
					let path = `patients/case/${_this.caseData.id}`;
					window.axios
						.delete(path)
						.then(function(response) {
							_this.deleting = false;
							if (response.status == 200) {
								_this.$message.success("病例删除成功!");
							} else {
								console.error(response);
								_this.$message.error("病例删除失败！");
							}
						})
						.catch(function(error) {
							_this.deleting = false;
							console.error(error);
							_this.$message.error("病例删除失败！");
						});
				})
				.catch(() => {
					console.error("[delete case] error happened");
				});
		}
	},
	created() {
		return;
		if (this.caseData.caseName.indexOf('["') > -1) {
			this.caseData.caseName = JSON.parse(this.caseData.caseName);
		} else {
			this.caseData.caseName = '["' + this.caseData.caseName + '"]';
			this.caseData.caseName = JSON.parse(this.caseData.caseName);
		}
		let number = {};
		let a;
		for (let item in this.count) {
			for (let i in this.count[item]) {
				if (i == "progress_note") {
					a = "process_note";
				} else if (i == "clinical_check") {
					a = "clinic_check";
				} else {
					a = i;
				}
				number[a] = this.count[item][i];
			}
		}
		this.number = number;
	},
	mounted() {
		this.loadCurrentTab();
	}
};
</script>
<style scoped>
.basic {
	width: 100%;
	/*height: 40px;*/
	line-height: 30px;
	/*margin-bottom: 10px;*/
}
.diagnose {
	height: 40px;
	line-height: 40px;
	margin-bottom: 10px;
}
.el-tag {
	/*margin: 10px 0 15px 10px;*/
	min-height: 28px;
	line-height: 26px;
	font-size: 14px;
}
.tab-icon {
	width: 30px;
	height: 30px;
}
.content {
	padding-top: 3px !important;
	color: #999;
}
.wt-header {
	width: 100%;
	margin: 0 0 10px 0;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.wt-header > * {
	display: inline-block;
	vertical-align: middle;
	margin: 4px 0 4px 0;
}
.wt-header h3 {
	margin: 0;
}
.wt-header span {
	margin-left: 10px;
}
.message,
.rightButtons {
	float: right;
	margin-top: 0;
}
.message > div {
	padding-right: 2em;
}
</style>